<template>
  <div
    id="productPopover"
    class="product-popover-view"
  >

    <el-popover
      ref="popover1"
      v-model:visible="visible"
      :placement="position"
      :width="900"
      trigger="manual"
    >
      <template #reference>
        <slot />
      </template>
      <div style="display: flex;justify-content: space-between;padding-bottom: 10px">
        <div>
          <span v-if="column">{{ getProductName(column) }}</span>
        </div>

        <div class="btn-view">

          <!--          <el-button-->
          <!--                  class="main-btn"-->
          <!--                  size="small"-->
          <!--                  @click="onClose"-->
          <!--          >关闭</el-button>-->

          <el-button
            class="main-btn"
            size="small"
            type="primary"
            @click="onCancel"
          >取消
          </el-button>

          <el-button
            class="main-btn"
            size="small"
            type="primary"
            @click="onConfirm"
          >确定
          </el-button>
        </div>

      </div>
      <el-table
              max-height="300px"
        ref="singleTable"
        header-cell-class-name="table-header"
        border
        :data="tableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column
          label="产品通用名"
          prop="productPopularName"
        />
        <el-table-column
                label="商品名"
                prop="productName"
        />
        <el-table-column
          label="包装规格"
          prop="packSpecs"
        />
        <el-table-column
                label="生产厂家"
                prop="producer"
        />

      </el-table>
    </el-popover>

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, onMounted, ref, watch,} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    searchs: {
      type: String,
      default: '',
    },
    terminalId: {
      type: Number,
      default: 0,
    },
    typeNum: {
      type: Number,
      default: 0,
    },
    position: {
      type: String,
      default: 'bottom-start',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    var visible = ref(false)
    var tableData = ref([])
    var column = ref(null)
    const singleTable = ref(null)

    const getData = () => {
      if (props.searchs && !props.disabled) {
        const pam = {
          id: props.terminalId,
          keyWord: props.searchs,
        }
        const pam1 = {
          terminalId: props.terminalId,
          keyWord: props.searchs,
        }
        if (props.typeNum === 2) {
          api.terminal.TERMINAL_DIRECT_PEODUCT(pam1).then((res) => {
            if (!res.code && res.data) {
              tableData.value = res.data
            }
          })
        } else {
          api.terminal.REGISTERED_TERMINAL_PRODUCT(pam).then((res) => {
            if (!res.code && res.data) {
              tableData.value = res.data.list
            }
          })
        }
      }
    }

    watch(
      () => props.searchs,
      (newS, oldS) => {
        if (!props.disabled) {
          getData()
          visible.value = true
        }
      }
    )

    onMounted(() => {
      document.addEventListener('click', function(e) {
        // console.log(document.getElementById('productPopover'))
        var pop = document.getElementById('productPopover')

        if (e.target !== pop && !document.contains(pop, e.target)) {
        } else {
          visible.value = false
        }
      })
    })

    const handleCurrentChange = (val) => {
      column.value = val
    }

    const onConfirm = () => {
      if (!column) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择产品',
        })
      }
      const a = JSON.parse(JSON.stringify(column.value))
      emit('confirm', a)
      column.value = null
      setTimeout(() => {
        visible.value = false
      }, 100)
    }

    const onCancel = () => {
      singleTable.value.setCurrentRow()
      column.value = null
      visible.value = false
    }

    const onClose = () => {
      visible.value = false
    }

    return {
      visible,
      tableData,
      singleTable,
      column,

      handleCurrentChange,
      onConfirm,
      onCancel,
      onClose,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
</style>
